/* 基本变量 */
@color: #999;
@bgColor: skyblue;//不要添加引号
@imgUrl:"ff99e809833507c4b4ea7661b02571_180_135.jpg";//加双引号
@width: 100px;
@height: 100px;
@margin:10px auto;
@selecter:#wrap;
@myclass:wrap;
@borderName:border;//样式名称同样可以定义变量
@{selecter} {
  color: @color;
  width: @width;
  height: @height;
  margin: @margin;
  background: @bgColor;
  @{borderName}:solid 1px red;//变量的使用一般如果是css中的属性值，如选择器、样式名称都是@{}引用，如果是属性值，一般直接@变量名引用
}
.@{myclass}{
  color: @color;
  width: @width;
  height: @height;
  margin: @margin;
  background: @bgColor;
}
.wrap-img{
  background: url("@{imgUrl}");//图片路径
}



/*样式组合*/
@myDiv:{
    width: 100px;
    height: @height;
    @{borderName}:solid 1px blue;
    margin: @margin;
}
.mydiv{
  @myDiv();
}


/*变量运算*/
@div1width:300px;
@div1color:#222;
.div1{
    width: (@div1width)-20;
    height: ((@div1width)-20)*1;
    color: @color*2;
    background: @color+#111;
}

/*变量套用*/
@div2width:100px;
@div2height:@div2width;//注意less没有类似js的变量提升，所以变量必须先初始化才能调用，否则实际运行也会报错

@div2name:"div2 content";
@div2content:"div2name";
.div2{
  width: @div2width;
  height: @div2height;
  background: aqua;
}
.div2:after{
  content: @@div2content;
}

/*&可以拿到上一层选择器*/
.div3{
  &:after{
    content: "利用&符号拿到上层选择器.div3";
  }
  &_content{
    width: 60px;
    height: 60px;
    background: aqua;
    overflow: hidden;
  }
}